<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Search ul</title>
        <style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            .box {
                width: 500px;
                margin: 200px auto;
            }
            ul {
                width: 382px;
                padding: 5px;
                list-style: none;
                border: 1px solid red;
                display: none;
            }
            li {
                padding: 5px;
            }
            li:hover {
                background-color: red;
            }
            input {
                width: 400px;
            }
            button {
                width: 70px;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <input type="text" id="si"/>
            <button>搜索</button>
            <ul id="uull"></ul>
        </div>
        <script>
            var arr = ["a", "ab", "abc", "abcd", "aa", "aaa"];
            var input = document.getElementById("si");
            var ul = document.getElementById("uull");
            input.onkeyup = function() {
                var value = this.value;
                ul.innerHTML = ""; 
                for (var i = 0; i < arr.length; i++) {
                    var item = arr[i];
                    if (item.startsWith(value)) {
                        var li = document.createElement("li");
                        li.innerText = item;
                        ul.appendChild(li);
                    }
                }
                if (ul.childElementCount === 0) {
                    ul.style.display = "none";
                } else {
                    ul.style.display = "block";
                }
            };
            input.onblur = function() {
                ul.style.display = "none";
            };
        </script>
    </body>
</html>